<!--
 * @author: 十一
 * @since: 2024-04-22
 * index.vue
 * @desc: new page
-->
<template>
  <div class="content">
    <a-row :gtuuter="15">
      <a-col span="6">
        <div class="card">
          <i class="iconfont icon-content icon-yonghu" style="color: #40c9c6"></i>
          <a-statistic :title="$t('User')" :value="112893" />
        </div>
      </a-col>
      <a-col span="6">
        <div class="card">
          <i class="iconfont icon-content icon-zidian" style="color: #666666"></i>
          <a-statistic :title="$t('Dictionary')" :value="246" />
        </div>
      </a-col>
      <a-col span="6">
        <div class="card">
          <i class="iconfont icon-content icon-fenlei" style="color: #ff9000"></i>
          <a-statistic :title="$t('Classification')" :value="15" />
        </div>
      </a-col>
      <a-col span="6">
        <div class="card">
          <i class="iconfont icon-content icon-wangluoziyuan" style="color: #4dc6ec"></i>
          <a-statistic :title="$t('Resource')" :value="169" />
        </div>
      </a-col>
    </a-row>
    <div style="padding: 10px">
      <div id="LineChart"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue'
import * as echarts from 'echarts'
import moment from 'moment'
// 获取当前日期
const startOfWeek = moment()
let dateArr: string[] = []
function daysRecursion(days: number) {
  if (days !== 0) {
    days--
    dateArr.push(startOfWeek.clone().add(-days, 'days').format('YYYY-MM-DD'))
    daysRecursion(days)
  }
}
daysRecursion(15)

let numberArr: number[] = []
function numberRecursion(number: number) {
  if (number !== 0) {
    number--
    numberArr.push(Math.floor(Math.random() * 100000))
    numberRecursion(number)
  }
}
numberRecursion(15)
type EChartsOption = echarts.EChartsOption
onMounted(() => {
  // 折线图堆叠
  let LineChartDom = document.getElementById('LineChart')!
  let LineCharmyChart = echarts.init(LineChartDom)
  let LineCharmyChartoption: EChartsOption

  LineCharmyChartoption = {
    title: {
      text: '近15日访问量'
    },
    tooltip: {
      trigger: 'axis'
    },

    grid: {
      left: '1%',
      right: '2%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: dateArr
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        smooth: true, //默认是false,判断折线连线是平滑的还是折线
        name: '访问量',
        type: 'line',
        stack: 'Total',
        data: numberArr,
        color: '#4dc6ec'
      }
    ]
  }
  LineCharmyChartoption && LineCharmyChart.setOption(LineCharmyChartoption)
})
</script>

<style lang="less" scoped>
.content {
  .ant-col-6 {
    padding: 10px;
    .card {
      padding: 15px;
      background: #f0f2f5;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 10px;

      .iconfont {
        font-size: 60px;
      }
      .ant-statistic {
        display: flex;
        align-items: center;
        flex-direction: column;
      }
    }
    .card:hover {
      box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
    }
  }
}
#LineChart {
  height: 50vh;
  width: 100%;
  border: 1px solid #ebebeb;
  border-radius: 2px;
  padding: 15px;
}
</style>
